<template>
    <div class=liveview>
        <div id="watermarktoggle"></div>
        <!-- 左侧数据栏 -->
		<div class="liveview_left">
            <el-input
                class="liveview_left_input"
                placeholder="输入关键字进行过滤"
                v-model="filterText">
            </el-input>
            <el-collapse v-model="activeNames">
                <el-collapse-item name="1" id="headswitch">
                    <template slot="title">
                        <div style="display: flex;justify-content: space-between;width: 85%; align-items: center;">
                            <div>{{$t("message.live.device")}}</div>
                            <div class="liveview_colltitle">
                                <div class="liveview_titleicon1" @click.stop="Refresh('device')"></div>
                                <div @click.stop="headswitch1" class="liveview_titleicon"></div>
                            </div>
                        </div>
                    </template>
                    <el-tree
                        :data="data"
                        node-key="id"
                        :filter-node-method="filterNode"
                        ref="tree"
                        @node-click="handleNodeClick"
                        :props="defaultProps">
                        <span slot-scope="{ data }" style="width:100%;">
                            <div style="width:100%;display: flex;justify-content: space-between;">
                                <!-- draggable="true" 
                                    @dragstart="dragStart($event,data.token,data.label,data.streamprofile, data.name,data.disabled_me,node)" -->
                                <span 
                                    class="size_color" 
                                    draggable="true" 
                                    @dragstart="dragStart($event,data.token,data.label,data.streamprofile, data.name,data.disabled_me)" style="display: flex; justify-content: flex-start; align-items: center;">
                                    <span style="font-size: 12px;" :class="data.iconclass" :id="'icon'+data.token"></span>
                                    <span :class="data.iconclass1" style="padding-left: 4px;">{{data.label}}</span>
                                    <span v-if="data.length" style="padding-left: 4px;">{{data.online}}/{{data.length}}</span>
                                    <el-popover placement="bottom-end" trigger="click" v-if="data.firstLevel" class="Status" popper-class="popperOptions" style="flex: 1; text-align: right;">
                                        <div class="StatusPrompt" >
                                            <div style="width:100%;display: flex;justify-content: space-between;">
                                                <span style="font-size:12px;">
                                                    <span style="padding-left:5px">
                                                        <i class="iconfont icon-shexiangji" style="font-size:12px;"></i>
                                                        在线:{{data.online}}
                                                    </span>
                                                    <span class="el-tree-camera" style="padding-left:5px">
                                                        <i class="iconfont icon-shexiangji el-tree-camera" style="font-size:12px;"></i>
                                                        离线:{{data.offline}}
                                                    </span>
                                                    <span class="el-tree-camera" style="padding-left:5px">
                                                        <i class="iconfont icon-jinyong1 el-tree-camera " style="font-size:12px;"></i>
                                                        禁用:{{data.disable}}
                                                    </span>
                                                    <span class="el-tree-camera" style="padding-left:5px">
                                                        <i class="iconfont icon-kaiqishexiangtou1 el-tree-camera" style="font-size:12px;"></i>
                                                        空闲:{{data.idle}}
                                                    </span>
                                                </span>
                                            </div>
                                        </div>
                                        <!-- <el-button v-if="Status"  slot="reference" type="text"  class="iconfont icon-yanjing" style="padding-left: 4px;color:white" @click="StatusPrompt1"></el-button> -->
                                        <el-button  slot="reference" type="text"  class="iconfont icon-Close statusBtn" style="margin-left: 20px;" @click="StatusPrompt($event)"></el-button>
                                        
                                    </el-popover>
                                    <!-- <span v-if="data.offline" class="iconfont icon-kaiqishexiangtou" style="padding-left: 4px;font-size:10px;"> ({{data.offline}})</span> -->
                                </span>
                                <!-- <span :class="data.iconclass2" class="black" style="">{{$t("message.live.Videorecording")}}</span> -->
                                <div style="display:flex">
                                    <span :class="data.iconclass2" class="black" style="">●</span>
                                    <span :class="data.iconclass3" class="nowplay" >
                                        <div style="display:flex">
                                            <span class="dot">●</span>
                                            <span class="nowplayText">正在播放</span>
                                        </div>
                                    </span>
                                </div>
                            </div>
                        </span>
                    </el-tree>
                </el-collapse-item>
                <el-collapse-item name="1" id="headswitch1">
                    <template slot="title">
                        <div style="display: flex;justify-content: space-between;width: 85%; align-items: center;">
                            <div>{{$t("message.live.Region")}}</div>
                            <div class="liveview_colltitle">
                                <div class="liveview_titleicon1" @click.stop="Refresh('Region')"></div>
                                <div @click.stop="headswitch" class="liveview_titleicon"></div>
                            </div>
                        </div>
                    </template>
                   <el-tree
                        class="el_tree"
                        node-key="strName" 
                        :default-expanded-keys="['root']" 
                        :data="data1" 
                        ref="tree1"
                        :filter-node-method="filterNode1"
                        @node-click="handleNodeClick"
                        :props="defaultProps1">
                        <span slot-scope="{ data }" style="width:100%;">
                            <div style="width:100%;display: flex;justify-content: space-between;">
                                <span  
                                    draggable="true" 
                                    @dragstart="dragStart($event,data.strToken,data.strName,data.streamprofile, data.name,data.disabled_me)">
                                    <span v-if="data.iconclass" style="font-size: 12px;" :class="data.iconclass" :id="'icon'+data.strToken"></span>
                                    <span v-else style="font-size: 12px;" class="iconfont icon-quyu" :id="'icon'+data.strToken"></span>
                                    <span :class="data.iconclass1" style="padding-left: 4px;">{{data.strName}}</span>
                                </span>
                                <!-- <span :class="data.iconclass2" class="black" style="">{{$t("message.live.Videorecording")}}</span> -->
                                <div style="display:flex">
                                    <span :class="data.iconclass2" class="black" style="">●</span>
                                    <span :class="data.iconclass3" class="nowplay" >
                                        <div style="display:flex">
                                            <span class="dot">●</span>
                                            <span class="nowplayText">正在播放</span>
                                        </div>
                                    </span>
                                </div>
                            </div>
                        </span>
                        <!-- <span slot-scope="{data }" style="width:100%;">
                            <span>
                                <span class="iconfont icon-quyu"></span>
                                <span :class="data.iconclass1" style="padding-left: 4px;">{{data.strName}}</span>
                            </span>
                            <div v-if="data.cam.length!=0">
                                <el-tree class="el_tree1" :data="data.cam" :props="defaultProps1" @node-click="handleNodeClick">
                                    <span slot-scope="{ data }" style="width:100%;">
                                        <div style="width:100%;display: flex;justify-content: space-between;">
                                            <span  
                                                draggable="true" 
                                                @dragstart="dragStart($event,data.strToken,data.strName,data.streamprofile, data.name,data.disabled_me)">
                                                <span style="font-size: 12px;" :class="data.iconclass" :id="'icon'+data.strToken"></span>
                                                <span :class="data.iconclass1" style="padding-left: 4px;">{{data.strName}}</span>
                                            </span>
                                            <span :class="data.iconclass2" class="black" style="">{{$t("message.live.Videorecording")}}</span>
                                        </div>
                                    </span>
                                </el-tree>
                            </div>
                        </span> -->
                    </el-tree>
                </el-collapse-item>
                <el-collapse-item name="2" id="viewclis">
                    <template slot="title">
                        <div style="display: flex;justify-content: space-between;width: 85%; align-items: center;">
                            <div>{{$t("message.live.View")}}</div>
                            <div class="liveview_colltitle">
                                <div class="liveview_titleicon1" @click.stop="Refresh('view')"></div>
                                 <el-popover
                                    placement="right"
                                    :title="NewView"
                                    width="260"
                                    trigger="click">
                                    <div class="liveview_popover">
                                        <div class="liveview_popover_top">
                                            <div>{{ViewName}}</div>
                                            <el-input 
                                                placeholder="请输入名称" 
                                                class="liveview_left_input"
                                                v-model="viewname"></el-input>
                                        </div>
                                        <div class="liveview_popover_but">
                                            <el-button @click.stop="viewadd">{{$t("message.camera.save")}}</el-button>
                                        </div>
                                    </div>
                                    <div @click.stop="view" slot="reference" class="liveview_titleicon2"></div>
                                </el-popover>
                            </div>
                        </div>
                    </template>
                    <el-tree
                        class="el_tree"
                        node-key="strName" 
                        :default-expanded-keys="['root']" 
                        :data="viewdata" 
                        @node-click="viewClick"
                        :props="defaultProps2">
                        <span slot-scope="{data }" style="width:100%;">
                            <div style="width:100%;display: flex;justify-content: space-between;">
                                <span>
                                    <span :class="data.icon"></span>
                                    <span style="padding-left: 6px;">{{data.strName}}</span>
                                </span>
                                <div style="width:20%;display: flex;justify-content: space-between;">
                                    <div @click.stop="Delview(data.strToken)" class="iconfont icon-ashbin"></div>
                                    <div @click.stop="Editview(data)" class="iconfont icon-zhongmingming"></div>
                                </div>
                            </div>
                        </span>
                    </el-tree>
                </el-collapse-item>
            </el-collapse>
		</div>
		<!-- 右边视频栏 -->
      	<div class="liveview_right" id="videoPanel">
            <div id="video_hed" style="position: relative;">
                <div name='flex' style="" class="videoColor" v-for="r in rows" :key="r">
                    <div
                        @drop="dropTarget($event,r,c)" 
                        @dragover.prevent="dragover($event)" 
                        class="palace" 
                        name="flex" 
                        v-for="c in cols" 
                        @contextmenu.prevent="stopVideo($event)" 
                        @click="videoClick(r,c,$event)" :key="c"
                        @dblclick="dbclick(r,c,$event)">
                        <v-liveplay 
                            v-bind:id="'h'+r+c" 
                            :h5id="'h'+r+c" 
                            :rows="rows" 
                            :cols="cols" 
                            :h5videoid="'hvideo'+r+c"
                            :canvasid="'canvas'+r+c">
                        </v-liveplay>
                    </div>
                </div>
            </div>
			<div class="liveview_group blocks">
				<el-button type="button" class="iconfont icon-tubiao_huaban1" data-row="1|1" @click="changePanel($event)"></el-button>
				<el-button type="button" class="iconfont icon-tubiao_huaban1fuben" data-row="1|3" @click="changePanel($event)"></el-button>
				<el-button type="button" class="iconfont icon-tubiao_huaban1fuben2" data-row="2|2" @click="changePanel($event)"></el-button>

				<el-button type="button" class="iconfont icon-sansi" data-row="1|4" @click="changePanel($event)"></el-button>
				<el-button type="button" class="iconfont icon-tubiao_huaban1fuben3" data-row="1|6" @click="changePanel($event)"></el-button>
				<el-button type="button" class="iconfont icon-tubiao_huaban1fuben4" data-row="1|7" @click="changePanel($event)"></el-button>

				<el-button type="button" class="iconfont icon-tubiao_huaban1fuben5" data-row="3|3" @click="changePanel($event)"></el-button>

				
				<el-button type="button" class="iconfont icon-tubiao_huaban1fuben6" data-row="1|13" @click="changePanel($event)"></el-button>

				<el-button type="button" class="iconfont icon-qietu16" data-row="4|4" @click="changePanel($event)"></el-button>
				<el-button type="button" class="iconfont icon-qietu25" data-row="5|5" @click="changePanel($event)"></el-button>
				<el-button type="button" class="iconfont icon-tubiao_huaban1fuben9" @click="panelFullScreen($event)"> </el-button>
                <el-button type="button"  class="iconfont icon-quanbuguanbi-01 offAllVideo" @click="Alloffvideo"></el-button>
			</div>
		</div>
    </div>
</template>
<script>
import Vue from 'vue'
import liveplay from './liveview/Liveplay'
import uuid from '../assets/js/uuid'
export default {
    name: 'Liveview',
    components: {
        'v-liveplay': liveplay
    },
	data(){
		return{
            viewlists:{},
            NewView:this.$t("message.live.NewView"),
            ViewName:this.$t("message.live.ViewName"),
            cur_query:this.$route.query || {},
            viewname:null,//视图名称
            viewdata:[],//视图数据
            proto: this.$store.state.liveviewrtc,
            activeNames: ['1','2'],//左边
			rows: 3,
			cols: 3,
			selectCol: 1,
			selectRow: 1,
			contentHeight: '',
            contentWidth: '',
            filterText:"",//搜索框
            data:[],
            data1:[],
            defaultProps: {
                children: 'children',
                label: 'label',
                token:"token",
                iconclass:"iconclass",
                length:'length',
                online:'online',
                offline:'offline',
            },
            defaultProps1: {
                children: 'cam',
                label: 'strName',
                cam:"cam"
            },
            defaultProps2:{
                label: 'strName',
            },
            objlist:{},
            dbclicks:true,
            drags:true,
            h55id:''
		}
    },
	mounted(){
        setTimeout(() => {
            this.viewplay();
            if (this.$route.query.fullscreen=='true') {
                this.updateUI(0.89);
            }else{
                this.updateUI(0.82);
            }
            this.licenseWaterMark();
            this.addWaterMarker();
        }, 1000);
        if(this.$store.state.root=="Operator"){
                $('#headswitch').hide()
                $('#viewclis').hide()
            }else{
                $('#headswitch1').hide()
            }
        // this.addWaterMarker();
        // document.getElementById("watermarktoggle").style.display=this.$store.state.watermarktoggle;
        // console.log(localStorage.getItem('H5sRtcengine'))
		// if(localStorage.getItem('watermarktoggle')==null){
        //     console.log(this.$store.state.Certificatetime);
		// 	if(this.$store.state.Certificatetime=="true"){
		// 		document.getElementById("watermarktoggle").style.display='none';
		// 	}else if(this.$store.state.Certificatetime=="false"){
		// 		document.getElementById("watermarktoggle").style.display='block';
		// 	}
		// }else{
		// 	document.getElementById("watermarktoggle").style.display=this.$store.state.watermarktoggle;
        // }     
        this.loadtest();
        this.$nextTick(()=>{
            this.loadDevice();
            this.NumberDevice();
            this.cloudDevice();
            this.Regional();
            this.srcview();
        })
        this.viewlist();
        let _this = this
        this.$root.bus.$on('close',function(){
            $(_this.h55id).removeClass('dbclick')
            _this.dbclicks=true
        })
        _this.$root.bus.$on('closeToken',function(token){
            _this.closePlayvideo(token);
        });
        _this.$root.bus.$on('recToken',function(token){
            _this.elTreeBrec(token);
        });
        _this.$root.bus.$on('closerecToken',function(token){
            _this.closeelTreeBrec(token);
        });
	},
	methods:{
        // 在线离线状态提示
        StatusPrompt(e){
            for (let i = 0; i < e.currentTarget.classList.length; i++) {
                if (e.currentTarget.classList[i]=="icon-Close") {
                    e.currentTarget.classList.remove('icon-Close')
                    e.currentTarget.classList.add('icon-yanjing')
                    return;
                }else if (e.currentTarget.classList[i]=="icon-yanjing"){
                    e.currentTarget.classList.remove('icon-yanjing')
                    e.currentTarget.classList.add('icon-Close')
                    return;
                }
            }
        },
        closeelTreeBrec(token){
            for (var k = 0; k < this.data.length;k++){
                var data= this.data[k].children;
                if (data.length>0) {
                    for (var i = 0; i < data.length;i++){
                        // if (data[i].bRec==true) {
                            if (token==data[i].token) {
                                data[i].iconclass2 = '';
                            }    
                        // }
                    }
                }
            }
        },
        elTreeBrec(token){
            for (var k = 0; k < this.data.length;k++){
                var data= this.data[k].children;
                if (data.length>0) {
                    for (var i = 0; i < data.length;i++){
                        // if (data[i].bRec==true) {
                            if (token==data[i].token) {
                                data[i].iconclass2 = 'none';
                            }    
                        // }
                    }
                }
            }
        },
        closePlayvideo(token){
            for (var k = 0; k < this.data.length;k++){
                var data= this.data[k].children;
                if (data.length>0) {
                    for (var i = 0; i < data.length;i++){
                        if (data[i].bOnline==true) {
                            if (token==data[i].token) {
                                data[i].iconclass = 'iconfont icon-shexiangji ';
                                data[i].iconclass1 = '';
                                data[i].iconclass3 = '';
                            }    
                        }
                    }
                }
            }
        },
         licenseWaterMark() {
			let _this = this;
			var url =_this.$store.state.IPPORT + "/api/v1/GetSystemInfo?session=" + _this.$store.state.token;
            // console.log("------------",url)
			_this.$http.get(url).then(result => {
                if (result.status == 200) {
                    if (result.data.strLicenseType=='Enterprise'||result.data.strLicenseType=='Customization') {     
                        this.$store.state.Certificatetime='false'
                        sessionStorage.Certificatetime = 'false'
                        if(localStorage.getItem('watermarktoggle')==null){
                            if(this.$store.state.Certificatetime=="true"){
                                document.getElementById("watermarktoggle").style.display='block';
                            }else if(this.$store.state.Certificatetime=="false"){
                                document.getElementById("watermarktoggle").style.display='none';
                            }
                        }else{
                            document.getElementById("watermarktoggle").style.display=this.$store.state.watermarktoggle;
                        }
                    }else{
                        this.$store.state.Certificatetime='true'
                        sessionStorage.Certificatetime = 'true'
                        if(localStorage.getItem('watermarktoggle')==null){
                            if(this.$store.state.Certificatetime=="true"){
                                document.getElementById("watermarktoggle").style.display='block';
                            }else if(this.$store.state.Certificatetime=="false"){
                                document.getElementById("watermarktoggle").style.display='none';
                            }
                        }else{
                            document.getElementById("watermarktoggle").style.display=this.$store.state.watermarktoggle;
                        }
                        }
                }
			}).catch(error => {
                console.log("GetSystemInfo");
			});
		},
        Alloffvideo(){
            this.$store.state.offVideo='close'+uuid();
        },
        viewplay(){
            let data = this.cur_query.view;
            let FullScreen = this.cur_query.fullscreen||false;
            if (FullScreen=="true") {
                $('.liveview_left').addClass('liveview_lefts');
                $('.liveview_right').addClass('liveview_rights');
            }
            if(this.viewlists[data]){
                this.viewClick(this.viewlists[data]);
            }
        },
        autoplay(){
            let data = localStorage.getItem(this.$store.state.user);
            let srcdata = JSON.parse(data)
            if (srcdata.src.length>0) {
                this.viewClick(srcdata);
            }
        },

        viewlist(){
            var url = this.$store.state.IPPORT + "/api/v1/GetSrc"+"?session="+ this.$store.state.token;
            this.$http.get(url).then(result=>{
                if (result.status === 200) {
                    console.log(result.data.src);
                    for (let i = 0; i < result.data.src.length; i++) {
                        this.objlist[result.data.src[i].strToken]=result.data.src[i].strName
                    }
                    this.autoplay();
                }
            })

        },
        //编辑视图
        Editview(data){
            // console.log(data,this.$store.state.liveviewadd)
            // return
            var url = this.$store.state.IPPORT + "/api/v1/DelView?token="+data.strToken+"&session="+ this.$store.state.token;
            this.$http.get(url).then(result=>{
                if (result.status === 200) {
                    this.Editadd(data)
                }
            })
        },
        Editadd(data){
            // console.log(this.$store.state.liveviewadd);
            var viewdata={
                strName:data.strName,
                strToken:uuid(4, 16).toLowerCase(),
                strLayoutType:this.rows+'|'+this.cols,
                src:this.$store.state.liveviewadd
            }
            var viewjson=JSON.stringify(viewdata)
            // console.log(viewjson)
            // return
            var url = this.$store.state.IPPORT + "/api/v1/AddView?session="+ this.$store.state.token;
            this.$http.post(url,viewjson,{headers: {'Content-Type': 'application/json'}}).then(result=>{
                if (result.status === 200) {
                    // console.log(result,url)
                    this.Refresh('view')
                    this.$message({
                        message: this.$t("message.camera.Save_successfully"),
                        type: 'warning'
                    });
                }
            })

        },
        //删除视图
        Delview(strToken){
            for(var i=0;i<this.viewdata.length;i++){
                if(this.viewdata[i].strToken==strToken){
                    this.viewdata.splice(i,1)
                    // console.log(this.viewdata,strToken)
                }
            }
            var url = this.$store.state.IPPORT + "/api/v1/DelView?token="+strToken+"&session="+ this.$store.state.token;
            this.$http.get(url).then(result=>{
                if (result.status === 200) {
                    console.log(result)
                    this.$message({
                        message: this.$t("message.camera.Delete_successful"),
                        type: 'warning'
                    });
                    // this.Refresh('view')
                }
            })
        },
        //播放视图
        async viewClick(data){
            // console.log(data)
            this.$store.state.liveviewadd=[]
            var _this=this
            await this.changePanel(data,'viewClick')
            if(data.src.length==0){
                var vdata={
                    viewparameter:'viewparameter'
                }
                _this.$store.state.liveplay=vdata
                return
            }
            for(var i=0;i<data.src.length;i++){
                if (this.objlist[data.src[i].strToken] == undefined) return
                var label=''
                if(data.src[i].strStream=='main'){
                    // label=data.src[i].strName+"--"+this.$t('message.live.mainstream');
                    label=this.objlist[data.src[i].strToken]+"--"+this.$t('message.live.mainstream')
                }else if(data.src[i].strStream=='sub'){
                    // label=data.src[i].strName+"--"+this.$t('message.live.substream');
                    label=this.objlist[data.src[i].strToken]+"--"+this.$t('message.live.substream')
                }
                console.log(label)
                var vdata={
                    token:data.src[i].strToken,
                    streamprofile:data.src[i].strStream,
                    name:label,
                    label:data.src[i].strName,
                    vid:data.src[i].strIndex,
                    viewparameter:'viewparameter'
                }
                var viewdata={
                    strIndex:data.src[i].strIndex,
                    strToken:data.src[i].strToken,
                    strStream:data.src[i].strStream
                }
                _this.$store.state.liveplay=vdata
                await _this.$store.state.liveviewadd.push(viewdata)
            }
        },
        //保存视图
        viewadd(){
            if(this.viewname==null){
                return
            }
            var viewdata={
                strName:this.viewname,
                strToken:uuid(4, 16).toLowerCase(),
                strLayoutType:this.rows+'|'+this.cols,
                src:this.$store.state.liveviewadd
            }
            console.log(viewdata)
            var viewjson=JSON.stringify(viewdata)
            if(viewdata.strLayoutType=='1|1'){
                viewdata.icon='iconfont icon-tubiao_huaban11'
            }else if(viewdata.strLayoutType=='1|3'){
                viewdata.icon='iconfont icon-tubiao_huaban1fuben1'
            }else if(viewdata.strLayoutType=='2|2'){
                viewdata.icon='iconfont icon-tubiao_huaban1fuben21'
            }else if(viewdata.strLayoutType=='1|4'){
                viewdata.icon='iconfont icon-sansi'
            }else if(viewdata.strLayoutType=='1|6'){
                viewdata.icon='iconfont icon-tubiao_huaban1fuben31'
            }else if(viewdata.strLayoutType=='1|7'){
                viewdata.icon='iconfont icon-tubiao_huaban1fuben41'
            }else if(viewdata.strLayoutType=='3|3'){
                viewdata.icon='iconfont icon-tubiao_huaban1fuben51'
            }else if(viewdata.strLayoutType=='1|13'){
                viewdata.icon='iconfont icon-tubiao_huaban1fuben61'
            }else if(viewdata.strLayoutType=='4|4'){
                viewdata.icon='iconfont icon-tubiao_huaban1fuben71'
            }else if(viewdata.strLayoutType=='5|5'){
                viewdata.icon='iconfont icon-tubiao_huaban1fuben8'
            }
            console.log(viewjson)
            // return
            var url = this.$store.state.IPPORT + "/api/v1/AddView?session="+ this.$store.state.token;
            this.$http.post(url,viewjson,{headers: {'Content-Type': 'application/json'}}).then(result=>{
                console.log(result,url);
                if (result.status === 200) {
                    this.viewdata=[];
                    this.srcview()
                    // this.viewdata.push(viewdata)
                }
            })
            this.viewname=null
            
        },
        // 'http://localhost:8080/api/v1/AddView?session=59733292-eda0-42dd-b676-ed71c7a664cf'
        srcview(){
            console.log(this.$store.state.token);
            var url = this.$store.state.IPPORT + "/api/v1/GetView?session="+ this.$store.state.token;
            this.$http.get(url).then(result=>{
                console.log(result);
                if (result.status === 200) {
                    // console.log(result)
                    var oldarr=result.data.conf;
                    var oldarr1=result.data.src;
                    
                    for(var l in oldarr){
                        var dataroot=this.getview(oldarr[l],oldarr1);
                        if (dataroot.strLayoutType=="1|4") {
                            dataroot.icon= 'iconfont icon-sigongge02';
                        }
                        this.viewdata.push(dataroot);
                        this.viewlists[dataroot.strName]=dataroot
                    }
                    console.log(this.viewlists);
                    // console.log(this.viewlists.indexOf(cur_query['view']));
                    console.log(this.viewdata)
                }
            })
        },
        getview(arr,arr1){
            if(arr.strLayoutType=='1|1'){
                arr.icon='iconfont icon-tubiao_huaban11'
            }else if(arr.strLayoutType=='1|3'){
                arr.icon='iconfont icon-tubiao_huaban1fuben1'
            }else if(arr.strLayoutType=='2|2'){
                arr.icon='iconfont icon-tubiao_huaban1fuben21'
            }else if(arr.strLayoutType=='1|6'){
                arr.icon='iconfont icon-tubiao_huaban1fuben31'
            }else if(arr.strLayoutType=='1|7'){
                arr.icon='iconfont icon-tubiao_huaban1fuben41'
            }else if(arr.strLayoutType=='3|3'){
                arr.icon='iconfont icon-tubiao_huaban1fuben51'
            }else if(arr.strLayoutType=='1|13'){
                arr.icon='iconfont icon-tubiao_huaban1fuben61'
            }else if(arr.strLayoutType=='4|4'){
                arr.icon='iconfont icon-tubiao_huaban1fuben71'
            }else if(arr.strLayoutType=='5|5'){
                arr.icon='iconfont icon-tubiao_huaban1fuben8'
            }
            for(var i in arr.src){
                for(var j in arr1){
                    if(arr.src[i].strToken == arr1[j].strToken){
                        arr.src[i].strName = arr1[j].strName;
                        // console.log(arr.src[i])
                    }
                }
            }
            // if(arr.src && arr.src.length>0){
            //     for (var i = 0; i < arr.src.length; i++) {
            //         arr.src[i] = getview(arr.src[i],arr1);
            //     }
            // }
            return arr;
        },
        //刷新
        Refresh(type){
            if(type=='device'){
                this.data=[];
                this.loadtest();
                this.loadDevice();
                this.NumberDevice();
                this.cloudDevice();
            }else if(type=='Region'){
                this.data1=[];
                this.Regional();
            }else if(type=='view'){
                this.viewdata=[];
                this.srcview();
            }
        },
        //水印
        addWaterMarker(){
			if(!document.getElementById("watermarktoggle")){
				return
			}
            var date=new Date();
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = date.getDate() + ' ';
            var dates=Y+M+D;
            var watermarkstring= this.$store.state.watermarkstring;
            // console.log(watermarkstring);

            var can = document.createElement('canvas');
            var body = document.body;
            body.appendChild(can);
            can.width=300; //画布的宽
            can.height=200;//画布的高度
            can.style.display='none';
            var cans = can.getContext('2d');
            cans.rotate(-20*Math.PI/140); //画布里面文字的旋转角度
            cans.font = "16px Microsoft JhengHei"; //画布里面文字的字体
            cans.fillStyle = "rgba(17, 17, 17, 1)";//画布里面文字的颜色
            cans.textAlign = 'left'; //画布里面文字的水平位置
            cans.textBaseline = 'Middle'; //画布里面文字的垂直位置
            cans.fillText(watermarkstring,can.width/3,can.height/2); //画布里面文字的间距比例
            document.getElementById("watermarktoggle").style.backgroundImage="url("+can.toDataURL("image/png")+")";
        },
        //树形节点点击
        handleNodeClick(data, checked, indeterminate){
            $(this.h55id).removeClass('dbclick')
            this.dbclicks=true
            this.$root.bus.$emit('dbclick',true)
            if(data.streamprofile==undefined){
                data.streamprofile='main'
            }
            console.log(data)
            if (data.token&&data.bOnline==true) {
                data['iconclass'] = 'iconfont icon-shexiangji el-tree-camera-play';
                data['iconclass1'] = 'el-tree-camera-play';
                data['iconclass3'] = 'none';
            }
            if (data.strToken&&data.bOnline==true) {
                data['iconclass'] = 'iconfont icon-shexiangji el-tree-camera-play';
                data['iconclass1'] = 'el-tree-camera-play';
                data['iconclass3'] = 'none';
            }
            // var a=data.token.replace(/#/g,"%23")
            let _this =this;
            if(data.disabled_me==false){
                // document.getElementById("icon"+data.token).style.color="#5fbfa7";
                if (data.token) {
                    let vid = 'h' + _this.$data.selectRow + _this.$data.selectCol;
                    console.log(vid);
                    var vdata={
                        token:data.token,
                        streamprofile:data.streamprofile,
                        name:data.name,
                        label:data.label,
                        vid:vid
                    }
                    var viewdata={
                        strIndex:vid,
                        strToken:data.token,
                        strStream:data.streamprofile,
                    }
                    _this.$store.state.liveplay=vdata
                    for (let i = 0; i < _this.$store.state.liveviewadd.length; i++) {
                        if (_this.$store.state.liveviewadd[i].strIndex==vid) {
                            _this.$store.state.liveviewadd.splice(i,1);
                            i--;
                        }
                    }
                    _this.$store.state.liveviewadd.push(viewdata)
                    console.log("----------------------",vdata,_this.$store.state.liveviewadd);
                    // _this.$root.bus.$emit('liveplay', data.token, data.streamprofile, data.name,data.label,vid);
                    this.$root.bus.$emit('deviceStatus',data.token,vid);
                }
                if (data.strToken) {
                    console.log(data.strToken)
                    let vid = 'h' + _this.$data.selectRow + _this.$data.selectCol;
                    console.log(vid);
                    var vdata={
                        token:data.strToken,
                        streamprofile:data.streamprofile,
                        name:data.name,
                        label:data.label,
                        vid:vid
                    }
                    var viewdata={
                        strIndex:vid,
                        strToken:data.strToken,
                        strStream:data.streamprofile,
                    }
                    _this.$store.state.liveplay=vdata
                    for (let i = 0; i < _this.$store.state.liveviewadd.length; i++) {
                        if (_this.$store.state.liveviewadd[i].strIndex==vid) {
                            _this.$store.state.liveviewadd.splice(i,1);
                            i--;
                        }
                    }
                    _this.$store.state.liveviewadd.push(viewdata)
                    console.log("----------------------",vdata,_this.$store.state.liveplay);
                    // _this.$root.bus.$emit('liveplay', data.strToken, data.streamprofile, data.name,data.strName,vid);
                    this.$root.bus.$emit('deviceStatus',data.strToken,vid);
                }
                
                _this.$nextTick(()=>{
                    setTimeout(()=>{
                    for(var i=1;i<=this.rows;i++){
                        for(var c=1;c<=this.cols;c++){
                            var video= document.getElementById("hvideo"+i+c)
                            console.log('video.paused++++',video.poster);
                            if(video.poster==""||video.poster=="http://localhost:6080/"||video.poster==_this.$store.state.IPPORT){
                                this.selectCol = c;
                                this.selectRow =i;
                                $(".h5container").removeClass('h5videoh');
                                $("#h"+this.selectRow+this.selectCol).addClass('h5videoh');
                                // console.log('video.paused1',video.poster,i,c);
                                return false
                            }else{
                                console.log('video.paused1',video.poster);
                            }
                        }
                    }
                    },300)
                })
                var viewdata={
                    strName:this.$store.state.user,
                    strLayoutType:this.rows+'|'+this.cols,
                    src:this.$store.state.liveviewadd
                }
                localStorage.setItem(this.$store.state.user,JSON.stringify(viewdata));
            }else{
               console.log("不可用");
            }
        },
        //拖动播放
        dragStart(ev,token,label,streamprofile,name,disabled_me){
            this.drags=false
            // console.log(ev,token,label,streamprofile,name,disabled_me,"124");
            var drag={
                token:token,
                label:label,
                streamprofile:streamprofile,
                name:name,
                disabled_me:disabled_me,
            }
            this.drag=drag;
            ev.dataTransfer.setData("Text",ev.target.id);
        },
        dragover (ev) {
            // console.log(ev,"123",ev.target.id)
            // ev.preventDefalut()
        },
        dropTarget (ev,r,c) {
            if (this.drags) return
            this.drags =true
            let _this =this;
            var data=this.drag;
            if(data.streamprofile==undefined){
                data.streamprofile='main'
            }
            // return false;
            if(data.disabled_me==false){
                // document.getElementById("icon"+data.token).style.color="#5fbfa7";
                if (data.token) {
                    let vid = 'h' + r + c;
                    var vdata={
                        token:data.token,
                        streamprofile:data.streamprofile,
                        name:data.name,
                        label:data.label,
                        vid:vid
                    }
                    var viewdata={
                        strIndex:vid,
                        strToken:data.token,
                        strStream:data.streamprofile
                    }
                    _this.$store.state.liveplay=vdata
                    _this.$store.state.liveviewadd.push(viewdata)
                    console.log("----------------------",vdata,_this.$store.state.liveplay);
                    // _this.$root.bus.$emit('liveplay', data.token, data.streamprofile, data.name,data.label,vid);
                }
                _this.$nextTick(()=>{
                    setTimeout(()=>{
                    for(var i=1;i<=this.rows;i++){
                        for(var c=1;c<=this.cols;c++){
                            var video= document.getElementById("hvideo"+i+c)
                            // console.log('video.paused',video);
                            if(video.poster==""||video.poster=="http://localhost:6080/"||video.poster==_this.$store.state.IPPORT){
                                this.selectCol = c;
                                this.selectRow =i;
                                $(".h5container").removeClass('h5videoh');
                                $("#h"+this.selectRow+this.selectCol).addClass('h5videoh');
                                return false
                            }else{
                                console.log('video.paused1',!video.poster);
                            }
                        }
                    }
                    },300)
                })
                    
            }else{
               console.log("不可用");
            }
        },
		//点击宫格
		videoClick(r, c, $event) {
            this.selectCol = c;
            this.selectRow = r;
            console.log(r, c);
            $(".h5container").removeClass('h5videoh');
            $("#h"+r+c).addClass('h5videoh');
        },
        dbclick(r,c,event){
            if (!($('#hvideo'+r+c).get(0).paused)){
                if (this.dbclicks) {
                    console.log(r,c,this.cols*this.rows);
                    if (this.cols*this.rows==6) {
                        if (r*c == 2 || r*c == 3) {
                            this.h55id = "#h"+r+c;
                            document.getElementsByClassName('Six_Palace')[c-1].setAttribute('class','palace sixts')
                            this.dbclicks=false;
                            this.$root.bus.$emit('dbclick', r,c);
                        }else{
                        this.h55id = "#h"+r+c;
                        $("#h"+r+c).addClass('dbclick');
                        this.dbclicks=false;
                        this.$root.bus.$emit('dbclick', r,c);
                        }
                    }else if (this.cols*this.rows==13) {
                        if (r*c == 6 || r*c == 8) {
                            this.h55id = "#h"+r+c;
                            document.getElementsByClassName('videoflexitem')[c-1].setAttribute('class','palace sixts')
                            this.dbclicks=false;
                            this.$root.bus.$emit('dbclick', r,c);
                        }else{
                        this.h55id = "#h"+r+c;
                        $("#h"+r+c).addClass('dbclick');
                        this.dbclicks=false;
                        this.$root.bus.$emit('dbclick', r,c);
                        }
                    }else if(this.cols*this.rows==7){
                        this.h55id = "#h"+r+c;
                        document.getElementsByClassName('Seven_Palace')[c-1].setAttribute('class','palace sixts')//Seven_Palace
                        this.dbclicks=false;
                        this.$root.bus.$emit('dbclick', r,c);
                    }else{
                        console.log(11111);
                        this.h55id = "#h"+r+c;
                        $("#h"+r+c).addClass('dbclick');
                        this.dbclicks=false;
                        this.$root.bus.$emit('dbclick', r,c);
                    }
                }else{
                    if (this.cols*this.rows==6) {
                        if (r*c == 2 || r*c == 3) {
                            this.h55id = "";
                            $(".sixts").addClass('Six_Palace');
                            $(".sixts").removeClass('sixts');
                            this.dbclicks=true;
                            this.$root.bus.$emit('dbclick', r,c);
                        }else{
                            this.h55id = "";
                            $("#h"+r+c).removeClass('dbclick');
                            this.dbclicks=true;
                            this.$root.bus.$emit('dbclick', r,c);
                        }
                    }else if (this.cols*this.rows==13) {
                        if (r*c == 6 || r*c == 8) {
                            this.h55id = "";
                            $(".sixts").addClass('videoflexitem');
                            $(".sixts").removeClass('sixts');
                            this.dbclicks=true;
                            this.$root.bus.$emit('dbclick', r,c);
                        }else{
                            this.h55id = "";
                            $("#h"+r+c).removeClass('dbclick');
                            this.dbclicks=true;
                            this.$root.bus.$emit('dbclick', r,c);
                        }
                    }else if(this.cols*this.rows==7){
                        this.h55id = "";
                        $(".sixts").addClass('Seven_Palace');
                        $(".sixts").removeClass('sixts');
                        this.dbclicks=true;
                        this.$root.bus.$emit('dbclick', r,c);
                    }else{
                        this.h55id = "";
                        $("#h"+r+c).removeClass('dbclick');
                        this.dbclicks=true;
                        this.$root.bus.$emit('dbclick', r,c);
                    }
                }
            };
            
        },
        stopVideo(event){
            return;
        },
		// ui宽度
		updateUI(x) {
            if($(document.body).width() < 768)
            {
                this.contentHeight = $(document.body).height()*0.4;
            }else
            {
                this.contentHeight = $(document.body).height()*x;
            }
            $('div[name="flex"]').height(this.contentHeight / this.rows);
            //this.contentHeight = $(document.body).height()*0.8;
            let _this = this;
            // if (H5siOS() === true)
            // {
            //     $('.h5video').prop("controls", true);
            // }
        },
		//点击宫格
        changePanel(event,viewClick) {
            $(this.h55id).removeClass('dbclick');
            this.dbclicks=true;
            this.h55id = "";
            this.$root.bus.$emit('dbclick',true)
            console.log(viewClick,event)
            var data=''
            if(viewClick=='viewClick'){
                data=event.strLayoutType
            }else{
                data = $(event.target).data('row');
            }
            // return
            let _this = this;
            let cols = data.split('|')[1];
            let rows = data.split('|')[0];
            //this.map.clear();
            Object.assign(this.$data, {
                rows: parseInt(rows),
                cols: parseInt(cols)
            });
            console.log(this.rows,this.cols);
            Vue.nextTick(function () {
                if(data=='1|6'||data=='1|7'||data=='1|13'){
                    // console.log("121");
                    
                }else{
                    // console.log("45845454545");
                    $("#videoPanel .videoColor .palace").removeClass("Seven_Palace");
                    $("#videoPanel .videoColor .palace").removeClass("Six_Palace");
                    $("#videoPanel .videoColor .palace").removeClass("videoflexitem");
                    $("#videoPanel .videoColor .palace").removeClass("fours_Palace");
                }
                var list_gong=$(".palace");
                if(data=='1|4'){
                    // console.log("23")
                    list_gong.removeClass("videoflexitem");
                    list_gong.removeClass("Seven_Palace");
                    list_gong.removeClass("Six_Palace");

                    list_gong.addClass("fours_Palace");
                }
                if(data=='1|6'){
                    // console.log("23")
                    list_gong.removeClass("videoflexitem");
                    list_gong.removeClass("Seven_Palace");
                    list_gong.removeClass("fours_Palace");

                    list_gong.addClass("Six_Palace");
                }
                if(data=='1|7'){
                    // console.log("234")
                    list_gong.removeClass("videoflexitem");
                    list_gong.removeClass("Six_Palace");
                    list_gong.removeClass("fours_Palace");

                    list_gong.addClass("Seven_Palace");
                }
                if(data=='1|13'){
                    // console.log("2345")
                    list_gong.removeClass("Six_Palace");
                    list_gong.removeClass("Seven_Palace");
                    list_gong.removeClass("fours_Palace");

                    list_gong.addClass("videoflexitem");
                }
                //$('div[name="flex"]').height(($(".content").height() - 50) / rows);
                $('div[name="flex"]').height(_this.contentHeight / rows);
                var cors=_this.cols*_this.rows;
                console.log(cors)
                if(cors>9){
                    $('.ptz_id_show').hide()
                    $('.info_id_show').hide()
                    $('.ptzcontrols').hide()
                    $('.information').hide()
                    $('.liveplay_ptz').hide()
                }
                if(cors<=9){
                    $('.ptz_id_show').show()
                    $('.info_id_show').show()
                }
            })
        },
        //全屏
        panelFullScreen(event) {
            var elem = document.getElementById('video_hed');
            //var elem = $("#videoPanel");
            console.log('panelFullScreen', event);
            if (
            document.fullscreenEnabled ||
            document.webkitFullscreenEnabled ||
            document.mozFullScreenEnabled ||
            document.msFullscreenEnabled
            ) {
                if (
                    document.fullscreenElement ||
                    document.webkitFullscreenElement ||
                    document.mozFullScreenElement ||
                    document.msFullscreenElement
                ) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                    console.log("========  updateUIExitFullScreen");
                    this.updateUIExitFullScreen();
                } else {
                     console.log('panelFullScreen3');

                    if (elem.requestFullscreen) {
                        elem.requestFullscreen();
                    } else if (elem.webkitRequestFullscreen) {
                        elem.webkitRequestFullscreen();
                    } else if (elem.mozRequestFullScreen) {
                        elem.mozRequestFullScreen();
                    } else if (elem.msRequestFullscreen) {
                        elem.msRequestFullscreen();
                    }
                    this.updateUIEnterFullScreen();
                    if (document.addEventListener)
                    {
                        document.addEventListener('webkitfullscreenchange', this.updateUIExitFullScreen, false);
                        document.addEventListener('mozfullscreenchange', this.updateUIExitFullScreen, false);
                        document.addEventListener('fullscreenchange', this.updateUIExitFullScreen, false);
                        document.addEventListener('MSFullscreenChange', this.updateUIExitFullScreen, false);
                    }
                }
            } else {
                console.log('Fullscreen is not supported on your browser.');
            }
        },
        updateUIEnterFullScreen(){

            $('div[name="flex"]').height(screen.height / this.rows);
        },
        updateUIExitFullScreen(){
            if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement)
            {
                $('div[name="flex"]').height(this.contentHeight / this.rows);
            }
        },
        //最菜的写法
        headswitch(){
            $('#headswitch').show()
            $('#headswitch1').hide()
        },
        headswitch1(){
            $('#headswitch1').show()
            $('#headswitch').hide()
        },
        //测试机仓
        loadtest(){
            var root = this.$store.state.IPPORT;
            if(this.$store.state.root=="Operator"){
                return false
            }
            this.$store.state.Recviewadd=[];
            var url = root + "/api/v1//GetSrcCamera?session="+ this.$store.state.token;
            // return falsel;
            this.$http.get(url).then(result=>{
                if(result.status == 200){
                    var data =  result.data;
                    var srcGroup = {children: []};
                    srcGroup.label=this.$t('message.live.camera');
                    srcGroup.iconclass="iconfont  icon-shexiangji";
                    srcGroup.length=data.src.length;
                    var number = 0;
                    var numberbDisable = 0;
                    var offlineNumber = 0;
                    var disableNumber = 0;
                    var IdleNumber =0;
                    for(var i=0; i< data.src.length; i++){
                        var item = data.src[i];
                        if (item.bOnline&&!item.bDisable) {
                            number=number+1;
                        }
                        if(item['nOriginalType'] == 'H5_CH_GB'){
                            numberbDisable=numberbDisable+1;
                            continue;
                        }else{
                            // 主副流
                            var node=[{
                            token : item['strToken'],
                            streamprofile : "main",
                            label :this.$t('message.live.mainstream'),
                            name:item['strName']+"--"+this.$t('message.live.mainstream'),
                            iconclass : 'mdi mdi-playlist-play fa-fw',
                            disabled_me:false
                            },{
                            token : item['strToken'],
                            streamprofile : "sub",
                            label :this.$t('message.live.substream'),
                            name:item['strName']+"--"+this.$t('message.live.substream'),
                            iconclass : 'mdi mdi-playlist-play fa-fw',
                            disabled_me:false
                            }]
                            var newItem ={
                                token : item['strToken'],
                                label : item['strName'],
                                iconclass : 'iconfont  icon-shexiangji',
                                iconclass1 : '',
                                iconclass2 : 'iconfont  icon-shexiangtou',
                                name:item['strName']+"--"+this.$t('message.live.mainstream'),
                                children:node,
                                disabled_me:false};
                            if(item['bOnline']==true){
                                // newItem['iconclass'] = 'iconfont icon-kaiqishexiangtou';
                                newItem['bOnline'] = true;
                            }else if(item['bOnline']==false){
                                newItem['bOnline'] = false;
                            }
                            if(!item['bOnline']){
                                // newItem['iconclass'] = 'iconfont icon-kaiqishexiangtou';
                                newItem['iconclass'] = 'iconfont icon-shexiangji el-tree-camera';
                                newItem['iconclass1'] = 'el-tree-camera';
                                offlineNumber=offlineNumber+1;
                            }
                            if(item['nType'] == 'H5_CLOUD')
                                newItem['iconclass'] = 'mdi mdi-cloud-upload fa-fw';
                            
                            if(item['bRec'] == true){
                                // newItem['iconclass2'] = 'iconfont icon-radioboxfill none';
                                newItem['iconclass2'] = 'none';
                                this.$store.state.Recviewadd.push(item['strToken']);
                                newItem['bRec'] = true;
                            }else if(item['bRec']==false){
                                newItem['bRec'] = false;
                            }
                            
                            if(item['bDisable'] == true&&this.$store.state.devicemarktoggle=='none'){
                                numberbDisable = numberbDisable+1;
                                continue;
                            }
                            if(item['bDisable'] == true){
                                if (this.$store.state.devicemarktoggle==undefined||this.$store.state.devicemarktoggle=='block') {
                                    disableNumber=disableNumber+1;
                                }
                            }
                            if (item['bDisable'] == true) {
                                newItem['iconclass'] = 'iconfont icon-jinyong1 el-tree-camera';
                                newItem['iconclass1'] = 'el-tree-camera';
                            }
                            if (item['bIdle'] == true) {
                                IdleNumber=IdleNumber+1;
                                newItem['iconclass'] = 'iconfont icon-kaiqishexiangtou1 el-tree-camera';
                                newItem['iconclass1'] = 'el-tree-camera';
                            }
                            if (localStorage.getItem(this.$store.state.user)) {
                                let localToken = JSON.parse(localStorage.getItem(this.$store.state.user))['src'];
                                for (let i = 0; i < localToken.length; i++) {
                                    const playtoken = localToken[i]['strToken'];
                                    if (playtoken==item['strToken']&&item['bOnline']==true) {
                                        newItem['iconclass'] = 'iconfont icon-shexiangji el-tree-camera-play';
                                        newItem['iconclass1'] = 'el-tree-camera-play';
                                        newItem['iconclass3'] = 'none';
                                    }
                                }
                            }
                            if(!item['bOnline']){
                                srcGroup.children.push(newItem);
                            }else{
                                srcGroup.children.unshift(newItem);
                            }
                        }
                    }
                    srcGroup.firstLevel=true,
                    srcGroup.length=data.src.length-numberbDisable;
                    srcGroup.online=number;
                    // srcGroup.offline=srcGroup.length-number;
                    srcGroup.offline=offlineNumber;
                    srcGroup.disable=disableNumber;
                    srcGroup.idle = IdleNumber;
                    this.data.push(srcGroup);
                    console.log(this.data);
                } 
            })

        },
        //写作业
        loadDevice() {
            var root = this.$store.state.IPPORT;
            if(this.$store.state.root=="Operator"){
                return false
            }
            var url = root + "/api/v1/GetDevice?session="+ this.$store.state.token;

            //重组
            this.$http.get(url).then(result=>{
                if(result.status == 200){
                    // var srcData = [];
                    var data=result.data.dev;
                    // console.log(data)
                    if(Array.isArray(data)){
                        data.sort((a,b)=>{
                            if(a.strName===b.strName) return 0;

                            return a.strName > b.strName? 1:-1 
                        })
                        for(var i=0; i<data.length; i++){
                            var item=data[i];

                            this.data.push({
                                token:item.strToken,
                                label:item.strName,
                                length:'',
                                online:0,
                                offline:0,
                                iconclass:"iconfont icon-shexiangji",
                                children:[],
                                firstLevel:true,
                            })
                            this.loadSrc(item.strToken)
                        }
                    }
                }
            })
        },
        loadSrc(strToken) {
            var root = this.$store.state.IPPORT;
            let _this =this;
            
            var url = root + "/api/v1/GetDeviceSrc?token="+ strToken + "&session=" + this.$store.state.token;

            this.$http.get(url).then(result => {
                console.log(result);
                if (result.status == 200)
                {
                    var number = 0;
                    var numberbDisable = 0;
                    var offlineNumber = 0;
                    var disableNumber = 0;
                    var IdleNumber =0;
                    var data =  result.data;
                    var srcGroup = [];
                    for(var i=0; i< data.src.length; i++){
                        var item = data.src[i];
                        if (item.bOnline&&!item.bDisable) {
                            number=number+1;
                        }

                        // 主副流
                        var node=[{
                        token : item['strToken'],
                        streamprofile : "main",
                        label :this.$t('message.live.mainstream'),
                        name:item['strName']+"--"+this.$t('message.live.mainstream'),
                        iconclass : 'mdi mdi-playlist-play fa-fw',
                        disabled_me:false
                        },{
                        token : item['strToken'],
                        streamprofile : "sub",
                        label :this.$t('message.live.substream'),
                        name:item['strName']+"--"+this.$t('message.live.substream'),
                        iconclass : 'mdi mdi-playlist-play fa-fw',
                        disabled_me:false
                        }]
                        for(var l=0; l< node.length; l++){
                            if(item['bDisable'] == true){
                                node[l].disabled_me =true;
                            }
                        }
                        
                        var newItem ={
                                token : item['strToken'],
                                label : item['strName'],
                                iconclass : 'iconfont  icon-shexiangji',
                                iconclass1 : '',
                                name:item['strName']+"--"+this.$t('message.live.mainstream'),
                                children:node,
                                disabled_me:false};
                        if(item['bOnline']==true){
                            // newItem['iconclass'] = 'iconfont icon-kaiqishexiangtou';
                            newItem['bOnline'] = true;
                        }else if(item['bOnline']==false){
                            newItem['bOnline'] = false;
                        }
                        if(!item['bOnline']){
                            // newItem['iconclass'] = 'iconfont icon-kaiqishexiangtou';
                            newItem['iconclass'] = 'iconfont icon-shexiangji el-tree-camera';
                            newItem['iconclass1'] = 'el-tree-camera';
                        }
                        if(!item['bOnline']&&item['bIdle'] == false){ 
                            offlineNumber=offlineNumber+1;
                        }
                        if(item['nType'] == 'H5_CLOUD')
                            newItem['iconclass'] = 'mdi mdi-cloud-upload fa-fw';

                        if(item['bRec'] == true){
                            // newItem['iconclass2'] = 'iconfont icon-radioboxfill none';
                            newItem['iconclass2'] = 'none';
                            this.$store.state.Recviewadd.push(item['strToken']);
                            newItem['bRec'] = true;
                        }else if(item['bRec']==false){
                            newItem['bRec'] = false;
                        }

                        if(item['bDisable'] == true){
                            newItem['disabled_me'] =true;
                            // newItem['iconclass1'] = 'camera';
                            newItem['iconclass'] = 'iconfont icon-jinyong1 el-tree-camera';
                            newItem['iconclass1'] = 'el-tree-camera';
                        }
                        if(item['bDisable'] == true){
                            if (this.$store.state.devicemarktoggle==undefined||this.$store.state.devicemarktoggle=='block') {
                                disableNumber=disableNumber+1;
                            }
                        }
                        if(item['bDisable'] == true&&this.$store.state.devicemarktoggle=='none'){
                            numberbDisable = numberbDisable+1;
                            continue;
                        }
                        if (item['bIdle'] == true) {
                            newItem['iconclass'] = 'iconfont icon-kaiqishexiangtou1 el-tree-camera';
                            newItem['iconclass1'] = 'el-tree-camera';
                            IdleNumber=IdleNumber+1;
                        }
                        if (localStorage.getItem(this.$store.state.user)) {
                            let localToken = JSON.parse(localStorage.getItem(this.$store.state.user))['src'];
                            for (let i = 0; i < localToken.length; i++) {
                                const playtoken = localToken[i]['strToken'];
                                if (playtoken==item['strToken']&&item['bOnline']==true) {
                                    newItem['iconclass'] = 'iconfont icon-shexiangji el-tree-camera-play';
                                    newItem['iconclass1'] = 'el-tree-camera-play';
                                    newItem['iconclass3'] = 'none';
                                }
                            }
                        }
                        // srcGroup.push(newItem);
                        if(!item['bOnline']||item.bDisable){
                            srcGroup.push(newItem);
                        }else{
                            srcGroup.unshift(newItem);
                        }
                    }
                    var srcData = this.data.find(item => item.token === strToken);
                    if(srcData){
                        srcData.children=srcGroup;
                        srcData.length=result.data.src.length-numberbDisable;
                        srcData.online=number;
                        // srcData.offline=srcData.length-srcData.online;
                        srcData.offline=offlineNumber;
                        srcData.disable=disableNumber;
                        srcData.idle = IdleNumber;
                    }
                }
            }).catch(error => {
                console.log('GetSrc failed', error);
            });
        },
        //数字仓机
        NumberDevice() {
            var root = this.$store.state.IPPORT;
            if(this.$store.state.root=="Operator"){
                return false
            }
            //url
            var url = root + "/api/v1/GetGbDevice?session="+ this.$store.state.token;

            //重组
            this.$http.get(url).then(result=>{
                if(result.status == 200){
                    var data=result.data.dev;
                    // console.log(data)
                    if(Array.isArray(data)){
                        data.sort((a,b)=>{
                            if(a.strName===b.strName) return 0;

                            return a.strName > b.strName? 1:-1 
                        })
                        for(var i=0; i<data.length; i++){
                            var item=data[i];

                            this.data.push({
                                token:item.strToken,
                                label:item.strName,
                                iconclass:"iconfont icon-shexiangji",
                                children:[],
                                firstLevel:true,
                                length:'',
                                online:0,
                                offline:0,
                            })
                            this.NumberSrc(item.strToken)
                        }
                        // console.log(this.data)
                    }
                }
            })
        },
        NumberSrc(strToken) {
            var root = this.$store.state.IPPORT;
            let _this =this;
            this.$store.state.Recviewadd=[];
            var url = root + "/api/v1/GetGbDeviceSrc?token="+ strToken + "&session=" + this.$store.state.token;

            this.$http.get(url).then(result => {
                if (result.status == 200)
                {   
                    var number = 0;
                    var numberbDisable = 0;
                    var offlineNumber = 0;
                    var disableNumber = 0;
                    var IdleNumber =0;
                    var data =  result.data;
                    var srcGroup = [];
                    for(var i=0; i< data.src.length; i++){
                        var item = data.src[i];
                        if (item.bOnline&&!item.bDisable) {
                            number=number+1;
                        }
                        // 主副流
                        var node=[{
                        token : item['strToken'],
                        streamprofile : "main",
                        label :this.$t('message.live.mainstream'),
                        name:item['strName']+"--"+this.$t('message.live.mainstream'),
                        iconclass : 'mdi mdi-playlist-play fa-fw',
                        disabled_me:false
                        },{
                        token : item['strToken'],
                        streamprofile : "sub",
                        label :this.$t('message.live.substream'),
                        name:item['strName']+"--"+this.$t('message.live.substream'),
                        iconclass : 'mdi mdi-playlist-play fa-fw',
                        disabled_me:false
                        }]
                        var newItem ={
                                token : item['strToken'],
                                label : item['strName'],
                                iconclass : 'iconfont  icon-shexiangji',
                                iconclass1:'',
                                name:item['strName']+"--"+this.$t('message.live.mainstream'),
                                children:node,
                                disabled_me:false};
                        if(item['bOnline']==true){
                            // newItem['iconclass'] = 'iconfont icon-kaiqishexiangtou';
                            newItem['bOnline'] = true;
                        }else if(item['bOnline']==false){
                            newItem['bOnline'] = false;
                        }
                        if(!item['bOnline']){
                            //  newItem['iconclass'] = 'iconfont icon-kaiqishexiangtou';
                            newItem['iconclass'] = 'iconfont icon-shexiangji el-tree-camera';
                            newItem['iconclass1'] = 'el-tree-camera';
                        }
                        if(!item['bOnline']&&item['bIdle'] == false){ 
                            offlineNumber=offlineNumber+1;
                        }
                        if(item['nType'] == 'H5_CLOUD')
                            newItem['iconclass'] = 'mdi mdi-cloud-upload fa-fw';

                        if(item['bRec'] == true){
                            // newItem['iconclass2'] = 'iconfont icon-radioboxfill none';
                            newItem['iconclass2'] = 'none';
                            this.$store.state.Recviewadd.push(item['strToken']);
                            newItem['bRec'] = true;
                        }else if(item['bRec']==false){
                            newItem['bRec'] = false;
                        }
                        if (item['bDisable'] == true) {
                            newItem['iconclass'] = 'iconfont icon-jinyong1 el-tree-camera';
                            newItem['iconclass1'] = 'el-tree-camera';
                        }
                        if(item['bDisable'] == true){
                            if (this.$store.state.devicemarktoggle==undefined||this.$store.state.devicemarktoggle=='block') {
                                disableNumber=disableNumber+1;
                            }
                        }
                        
                        if(item['bDisable'] == true&&this.$store.state.devicemarktoggle=='none'){
                            numberbDisable = numberbDisable+1;
                            continue;
                        }
                        if (item['bIdle'] == true) {
                            newItem['iconclass'] = 'iconfont icon-kaiqishexiangtou1 el-tree-camera';
                            newItem['iconclass1'] = 'el-tree-camera';
                            IdleNumber=IdleNumber+1;
                        }
                        if (localStorage.getItem(this.$store.state.user)) {
                            let localToken = JSON.parse(localStorage.getItem(this.$store.state.user))['src'];
                            for (let i = 0; i < localToken.length; i++) {
                                const playtoken = localToken[i]['strToken'];
                                if (playtoken==item['strToken']&&item['bOnline']==true) {
                                    newItem['iconclass'] = 'iconfont icon-shexiangji el-tree-camera-play';
                                    newItem['iconclass1'] = 'el-tree-camera-play';
                                    newItem['iconclass3'] = 'none';
                                }
                            }
                        }
                    srcGroup.push(newItem);
                    }
                    var srcData = this.data.find(item => item.token === strToken)
                    // console.log(srcData)
                    if(srcData){
                        srcData.children=srcGroup
                        srcData.length=result.data.src.length-numberbDisable;
                        srcData.online=number;
                        // srcData.offline=srcData.length-srcData.online;
                        srcData.offline=offlineNumber;
                        srcData.disable=disableNumber;
                        srcData.idle = IdleNumber;
                    }
                }
            }).catch(error => {
                console.log('GetSrc failed', error);
            });
        },
        //级联
        cloudDevice() {
            var root = this.$store.state.IPPORT;
            if(this.$store.state.root=="Operator"){
                return false
            }
            var url = root + "/api/v1/GetCloudDevice?session="+ this.$store.state.token;

            //重组
            this.$http.get(url).then(result=>{
                if(result.status == 200){
                    var data=result.data.dev;
                    // console.log(data)
                    if(Array.isArray(data)){
                        data.sort((a,b)=>{
                            if(a.strName===b.strName) return 0;

                            return a.strName > b.strName? 1:-1 
                        })
                        for(var i=0; i<data.length; i++){
                            var item=data[i];

                            this.data.push({
                                token:item.strToken,
                                label:item.strName,
                                iconclass:"iconfont icon-shexiangji",
                                children:[],
                                firstLevel:true,
                                length:'',
                                online:0,
                                offline:0,
                            })
                            this.cloudSrc(item.strToken)
                        }
                        // console.log(this.data)
                    }
                }
            })
        },
        cloudSrc(strToken) {
            var root = this.$store.state.IPPORT;
            this.$store.state.Recviewadd=[];
            var url = root + "/api/v1/GetCloudDeviceSrc?token="+ strToken + "&session=" + this.$store.state.token;

            this.$http.get(url).then(result => {
                if (result.status == 200)
                {   
                    var number = 0;
                    var numberbDisable = 0;
                    var offlineNumber = 0;
                    var disableNumber = 0;
                    var IdleNumber =0;
                    var data =  result.data;
                    var srcGroup = [];
                    for(var i=0; i< data.src.length; i++){
                        var item = data.src[i];
                        if (item.bOnline&&!item.bDisable) {
                            number=number+1;
                        }
                        // 主副流
                        var node=[{
                        token : item['strToken'],
                        streamprofile : "main",
                        label :this.$t('message.live.mainstream'),
                        name:item['strName']+"--"+this.$t('message.live.mainstream'),
                        iconclass : 'mdi mdi-playlist-play fa-fw',
                        disabled_me:false
                        },{
                        token : item['strToken'],
                        streamprofile : "sub",
                        label :this.$t('message.live.substream'),
                        name:item['strName']+"--"+this.$t('message.live.substream'),
                        iconclass : 'mdi mdi-playlist-play fa-fw',
                        disabled_me:false
                        }]
                        var newItem ={
                                token : item['strToken'],
                                label : item['strName'],
                                iconclass : 'mdi mdi-video fa-fw',
                                iconclass1:'',
                                name:item['strName']+"--"+this.$t('message.live.mainstream'),
                                children:node,
                                disabled_me:false};
                        if(item['bOnline']==true){
                            // newItem['iconclass'] = 'iconfont icon-kaiqishexiangtou';
                            newItem['bOnline'] = true;
                        }else if(item['bOnline']==false){
                            newItem['bOnline'] = false;
                        }
                        if(!item['bOnline']){
                            // newItem['iconclass'] = 'iconfont icon-kaiqishexiangtou';
                            newItem['iconclass'] = 'iconfont icon-shexiangji el-tree-camera';
                            newItem['iconclass1'] = 'el-tree-camera';
                        }
                        if(!item['bOnline']&&item['bIdle'] == false){ 
                            offlineNumber=offlineNumber+1;
                        }

                        if(item['nType'] == 'H5_CLOUD')
                            newItem['iconclass'] = 'iconfont  icon-shexiangji';

                        if(item['bRec'] == true){
                            // newItem['iconclass2'] = 'iconfont icon-radioboxfill none';
                            newItem['iconclass2'] = 'none';
                            this.$store.state.Recviewadd.push(item['strToken']);
                            newItem['bRec'] = true;
                        }else if(item['bRec']==false){
                            newItem['bRec'] = false;
                        }
                         if (item['bDisable'] == true) {
                            newItem['iconclass'] = 'iconfont icon-jinyong1 el-tree-camera';
                            newItem['iconclass1'] = 'el-tree-camera';
                        }
                        if(item['bDisable'] == true){
                            if (this.$store.state.devicemarktoggle==undefined||this.$store.state.devicemarktoggle=='block') {
                                disableNumber=disableNumber+1;
                            }
                        }
                        
                        if(item['bDisable'] == true&&this.$store.state.devicemarktoggle=='none'){
                            numberbDisable = numberbDisable+1;
                            continue;
                        }
                        if (item['bIdle'] == true) {
                            newItem['iconclass'] = 'iconfont icon-kaiqishexiangtou1 el-tree-camera';
                            newItem['iconclass1'] = 'el-tree-camera';
                            IdleNumber=IdleNumber+1;
                        }
                        if (localStorage.getItem(this.$store.state.user)) {
                            let localToken = JSON.parse(localStorage.getItem(this.$store.state.user))['src'];
                            for (let i = 0; i < localToken.length; i++) {
                                const playtoken = localToken[i]['strToken'];
                                if (playtoken==item['strToken']&&item['bOnline']==true) {
                                    newItem['iconclass'] = 'iconfont icon-shexiangji el-tree-camera-play';
                                    newItem['iconclass1'] = 'el-tree-camera-play';
                                    newItem['iconclass3'] = 'none';
                                }
                            }
                        }

                    srcGroup.push(newItem);
                    }
                    var srcData = this.data.find(item => item.token === strToken)
                    // console.log(srcData)
                    if(srcData){
                        srcData.children=srcGroup
                        srcData.length=result.data.src.length-numberbDisable;
                        srcData.online=number;
                        // srcData.offline=srcData.length-srcData.online;
                        srcData.offline=offlineNumber;
                        srcData.disable=disableNumber;
                        srcData.idle = IdleNumber;
                    }
                }
            }).catch(error => {
                console.log('GetSrc failed', error);
            });
        },

        Regional(){
            var root = this.$store.state.IPPORT;
            var url = root + "/api/v1/GetRegion?session="+ this.$store.state.token;
            this.$http.get(url).then(result=>{
                var oldarr=result.data.root;
                var oldarr1=result.data.src;
                var dataroot=this.getchild(oldarr,oldarr1);
                if (localStorage.getItem(this.$store.state.user)) {
                    let localToken = JSON.parse(localStorage.getItem(this.$store.state.user))['src'];
                    for(var k in dataroot.cam){
                        for (let i = 0; i < localToken.length; i++) {
                            const playtoken = localToken[i]['strToken'];
                            if (playtoken==dataroot.cam[k].strToken&&dataroot.cam[k].bOnline==true) {
                                dataroot.cam[k].iconclass = 'iconfont icon-shexiangji el-tree-camera-play';
                                dataroot.cam[k].iconclass1 = 'el-tree-camera-play';
                                dataroot.cam[k].iconclass3 = 'none';
                            }
                        }
                        
                    }
                }
                this.datapush(dataroot)
            })
        },
        datapush(data){
            this.a(data)
        },
        a(data){
            console.log(data);
            if(data.node.length!=0){
                for (let i = 0; i < data.node.length; i++) {
                data.cam.push(data.node[i])
            }
            }
            delete data.node
            for (let i = 0; i < data.cam.length; i++) {
                if (data.cam[i].strName!='设备暂时不可用') {
                    this.b(data.cam[i])
                    this.data1=[];
                    this.data1.push(data);
                }
            }
        },
        b(data){
            if (data.name) {
                return
            }
            if(data.node.length!=0){
                for (let i = 0; i < data.node.length; i++) {
                    data.cam.push(data.node[i])
                }
            }
            delete data.node
            for (let i = 0; i < data.cam.length; i++) {
                if (data.cam[i].strName!='设备暂时不可用') {
                    console.log(data.cam[i]);
                    if (data.cam[i].cam) {
                        this.c(data.cam[i])
                    }
                }
            }
        },
        c(data){
            if (data.name) {
                return
            }
            if(data.node.length!=0){
                for (let i = 0; i < data.node.length; i++) {
                data.cam.push(data.node[i])
            }
            }
            delete data.node;
            for (let i = 0; i < data.cam.length; i++) {
                if (data.cam[i].strName!='设备暂时不可用') {
                    if (data.cam[i].cam) {
                        this.d(data.cam[i])
                    }
                }
            }
        },
        d(data){
            if (data.name) {
                return
            }
            if(data.node.length!=0){
                for (let i = 0; i < data.node.length; i++) {
                data.cam.push(data.node[i])
            }
            }
            delete data.node;
            for (let i = 0; i < data.cam.length; i++) {
                if (data.cam[i].strName!='设备暂时不可用') {
                if (data.cam[i].cam) {
                    this.e(data.cam[i])
                }}
            }
        },
        e(data){
            if (data.name) {
                return
            }
            if(data.node.length!=0){
                for (let i = 0; i < data.node.length; i++) {
                    if (data.cam[i].strName!='设备暂时不可用') {
                        data.cam.push(data.node[i])
                    }
            }
            }
            delete data.node;
        },
        getchild(arr,arr1) {
            this.$store.state.Recviewadd=[];
            for(var i in arr.cam){
                if(!arr.cam[i].strName){
                    for(var j in arr1){
                        if(arr.cam[i].strToken == arr1[j].strToken){
                            var node1=[{
                                strToken : arr1[j].strToken,
                                streamprofile : "main",
                                strName :this.$t('message.live.mainstream'),
                                name:arr1[j].strName+"--"+this.$t('message.live.mainstream'),
                                iconclass : 'mdi mdi-playlist-play fa-fw',
                                disabled_me:false
                            },{
                                strToken : arr1[j].strToken,
                                streamprofile : "sub",
                                strName :this.$t('message.live.substream'),
                                name:arr1[j].strName+"--"+this.$t('message.live.substream'),
                                iconclass : 'mdi mdi-playlist-play fa-fw',
                                disabled_me:false
                            }]
                            arr.cam[i].node=node1;
                            arr.cam[i].strName = arr1[j].strName;
                            arr.cam[i].name=arr1[j].strName+"--"+this.$t('message.live.mainstream')
                            arr.cam[i].bOnline = arr1[j].bOnline;
                            arr.cam[i].iconclass="iconfont  icon-shexiangji"
                            arr.cam[i].disabled_me=false
                            if(!arr1[j].bOnline){
                                // arr.cam[i].iconclass = 'iconfont icon-kaiqishexiangtou';
                                arr.cam[i].iconclass = 'iconfont icon-shexiangji el-tree-camera';
                                arr.cam[i].iconclass1 = 'el-tree-camera';
                            }

                            if(arr1[j].nConnectType == 'H5_CLOUD')
                                arr.cam[i].iconclass = 'iconfont  icon-shexiangji';

                            if(arr1[j].bRec == true){
                                // arr.cam[i].iconclass2  = 'iconfont icon-radioboxfill none';
                                arr.cam[i].iconclass2= 'none';
                                this.$store.state.Recviewadd.push(arr1[j].strToken);
                            } 

                            if(arr1[j].bDisable== true){
                                
                                arr.cam[i].node[0].disabled_me=true;
                                arr.cam[i].node[1].disabled_me=true;
                                arr.cam[i].disabled_me=true;
                                // arr.cam[i].iconclass1= 'camera';
                                arr.cam[i].iconclass= 'iconfont icon-jinyong1 el-tree-camera';
                                arr.cam[i].iconclass1 = 'el-tree-camera';
                            }
                            if (arr1[j].bIdle == true) {
                                arr.cam[i].iconclass = 'iconfont icon-kaiqishexiangtou1 el-tree-camera';
                                arr.cam[i].iconclass1 = 'el-tree-camera';
                            }
                        }
                    }
                }
            }

            var camarr=[]
			var camarr1=[]
			for(var i in arr.cam){
				camarr.push(arr.cam[i].strToken)
			}
			for(var i in arr1){
				camarr1.push(arr1[i].strToken)
			}
			let diff = camarr.filter(item => !new Set(camarr1).has(item))
			// console.log(diff)
			for(var i in arr.cam){
				for(var j in diff){
					if(arr.cam[i].strToken == diff[j]){
						arr.cam[i].strName = '设备暂时不可用';
						// arr.cam[i].iconclass="iconfont  icon-kaiqishexiangtou"
                        arr.cam[i].iconclass = 'iconfont icon-shexiangji el-tree-camera';
                        arr.cam[i].iconclass1 = 'el-tree-camera';
					}
				}
			}

            if(arr.node && arr.node.length>0){
                for (var i = 0; i < arr.node.length; i++) {
                    arr.node[i] = this.getchild(arr.node[i],arr1);
                }
            }
            if (arr.cam.length>0) {
                if (localStorage.getItem(this.$store.state.user)) {
                    let localToken = JSON.parse(localStorage.getItem(this.$store.state.user))['src'];
                    for(var k in arr.cam){
                        for (let i = 0; i < localToken.length; i++) {
                            const playtoken = localToken[i]['strToken'];
                            if (playtoken==arr.cam[k].strToken&&arr.cam[k].bOnline==true) {
                                arr.cam[k].iconclass = 'iconfont icon-shexiangji el-tree-camera-play';
                                arr.cam[k].iconclass1 = 'el-tree-camera-play';
                                arr.cam[k].iconclass3 = 'none';
                            }
                        }
                    }
                }
            }
            return arr;
        },
        //模糊查询
        filterNode(value, data, node) {
            // 如果什么都没填就直接返回
            if (!value) return true;
            // 如果传入的value和data中的label相同说明是匹配到了
            if (data.label.indexOf(value) !== -1) {
            return true;
            }
            // 否则要去判断它是不是选中节点的子节点
            return this.checkBelongToChooseNode(value, data, node);
        },
        filterNode1(value, data, node) {
            // 如果什么都没填就直接返回
            if (!value) return true;
            // 如果传入的value和data中的label相同说明是匹配到了
            if (data.strName.indexOf(value) !== -1) {
            return true;
            }
            // 否则要去判断它是不是选中节点的子节点
            // return this.checkBelongToChooseNode(value, data, node);
        },
        // 判断传入的节点是不是选中节点的子节点
        checkBelongToChooseNode(value, data, node) {
            const level = node.level;
            // 如果传入的节点本身就是一级节点就不用校验了
            if (level === 1) {
            return false;
            }
            // 先取当前节点的父节点
            let parentData = node.parent;
            // 遍历当前节点的父节点
            let index = 0;
            while (index < level - 1) {
            // 如果匹配到直接返回
            if (parentData.data.label.indexOf(value) !== -1) {
                return true;
            }
            // 否则的话再往上一层做匹配
            parentData = parentData.parent;
            index ++;
            }
            // 没匹配到返回false
            return false;
        },
    },
    computed: {
        contractFile() {
            return this.$store.state.videoid
        },  
        watchview(){
            return this.$route.query.view
        },
        fullscreen(){
            return this.$route.query.fullscreen||false;
        
        }
    },
    //模糊查询
    watch: {
        fullscreen(data){
            if (data=='true') {
                $('.liveview_left').addClass('liveview_lefts');
                $('.liveview_right').addClass('liveview_rights');
                this.updateUI(0.89)   
            }else{
                $('.liveview_left').removeClass('liveview_lefts');
                $('.liveview_right').removeClass('liveview_rights');
                this.updateUI(0.82)  
            }
        },
        watchview(data){
            if(this.viewlists[data]){
                this.viewClick(this.viewlists[data]);
            }
        },
        contractFile(value){
            var viewdata={
                strName:this.$store.state.user,
                strLayoutType:this.rows+'|'+this.cols,
                src:this.$store.state.liveviewadd
            }
            localStorage.setItem(this.$store.state.user,JSON.stringify(viewdata));
        },
        filterText(val) {
            if (this.$store.state.root=="Operator") {
                this.$refs.tree1.filter(val);
            }else{
                this.$refs.tree.filter(val);
                this.$refs.tree1.filter(val);
            }
        }
    }
    
}
</script>

<style lang="scss">
.liveview{
    .el-tree-node{
        overflow: auto;
    }
    padding-top: 10px;
    display: flex;
    // flex-wrap: wrap;
    justify-content: space-between;
    /* 水印 */
    #watermarktoggle{
        position: fixed;
        z-index: 100;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: none;
        pointer-events: none;
        margin-top: 40px;
    }
    .liveview_left{
        width: 16%;
        // min-width: 290px;
        height: 90vh;
        margin: 0 5px;
        overflow: auto;
        &::-webkit-scrollbar{
            display: none;
        }
        .liveview_left_input{
            margin: 10px 0;
        }
        // #headswitch1{
        //     display: none;
        // }
        //录像管理
        .black{
            display: none;font-size: 12px;color: #606266; padding-left: 4px;line-height: 24px;color: #f00;
        }
        .nowplay{
            display: none;font-size: 12px;color: #606266; padding-left: 4px;line-height: 23.5px;color: #30d158;
            .dot{
                font-size: 12px;line-height: 23.5px;padding-right: 4px;
            }
            .nowplayText{
                line-height: 26px;
            }
        }
        .none{
            display: block;
        }
        
        .el_tree .el-tree-node__content{
            min-height: 24px;
            height: auto;
        }
        .el-collapse{
            .el-collapse-item{
                height: 40vh;
                .el-collapse-item__wrap{
                    .el-collapse-item__content{
                        height: 35vh;
                        padding: 0 10px;
                        overflow: auto;
                        // ::-webkit-scrollbar{
                        //     display: none;
                        // }
                    }
                }
            }
        }
    }
    .StatusPrompt {
        display:none;
    }
    .liveview_lefts{
        width: 0%;
    }
    .liveview_right{
        width: 84%;
        height: 90vh;
        .dbclick{
            position: absolute;
            top: 1px;
            left: 1px;
            width: 83.45vw;
            height: 82.5vh;
        }
        /* 播放片段 */
        .h5videoh{
            /* border: 2px solid #f44336 !important;
            box-sizing: border-box; */
            box-shadow: 0 0 0 2px #f44336;
            // box-sizing: border-box;
            z-index: 10;
        }
        .videoColor {
            .palace{
                background-size: 10%;
                flex: 1 1 10%;
            }
            .fours_Palace{
                flex: 1 1 33.33%!important;
                height: 33.33% !important;
                &:nth-child(1){
                    flex: 1 1 100% !important;
                    height: 66.66% !important;
                }
            }
            /* 六 */
            .Six_Palace{
                flex: 1 1 33.33%!important;
                height: 33.33% !important;
                &:nth-child(1){
                    flex: 1 1 66.66% !important;
                    height: 66.66% !important;
                }
                &:nth-child(3){
                    width: 33.33% !important;
                    position: absolute;
                    top: 33.33%;
                    right: 0;
                }
            }
            .sixts{
                height: 100% !important;
                width: 100% !important;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1000;
            }
            /* 十三宫格 */
            .videoflexitem{
                flex: 1 1 25% !important;
                width: 25% !important;
                height: 25% !important;
                &:nth-child(6){
                    position: absolute;
                    top: 50%;
                    left: 0;
                }
                &:nth-child(7){
                    flex: 1 1 50% !important;
                    height: 50% !important;
                }
                &:nth-child(8){
                    flex: 1 1 25% !important;
                    position: absolute;
                    top: 50%;
                    right: 0;
                }
            }
            /* 七宫格 */
            .Seven_Palace{
                flex: 1 1 33.33%;
                height: 33.33% !important;
                &:nth-child(1){
                    height: 100% !important;
                }
                &:nth-child(3){
                    width: 33.33% !important;
                    position: absolute;
                    top: 33.33%;
                    right: 0;
                }
                &:nth-child(2){
                    width: 33.33% !important;
                    position: absolute;
                    top: 33.33%;
                    right: 33.33%;
                }
                &:nth-child(6){
                    width: 33.33% !important;
                    position: absolute;
                    bottom: 0;
                    right: 33.33%;
                }
                &:nth-child(7){
                    width: 33.33% !important;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                }
            }
        }
        div[name='flex'] {
            display: flex;
            flex-wrap: wrap;
            border-bottom: 0px !important;
            :hover {
                /*background-color: #3c8dbc;*/
                cursor: pointer;
            }
            +[name='flex'] {
                border-left: 0px !important;
            }
        }
        .liveview_group{
            width: 100%;
            padding: 20px 20%;
            display: flex;
            justify-content: space-between;
            button{
                border: none;
                background: none;
                font-size: 30px;
            }
        }
    }
    .liveview_rights{
        width: 100%;
        #video_hed{
            height: 100%;
        }
        .liveview_group{
            display: none;
        }
    }
}
.el-popover.el-popper{
    .liveview_popover{
        .liveview_popover_top{
            display: flex;
            width: 100%;
            margin-bottom: 10px;
            div{
                width: 35%;
                line-height: 40px;
            }
            .liveview_left_input{
                width: 65%;
                .el-input__inner{
                    width: 100%;
                    border: none;
                }
            }
        }
        .liveview_popover_but{
            width: 100%;
            display: flex;
            justify-content: flex-end;
            button{
                border-radius: 5px;
                border: none;
            }
        }
    }
}
</style>